<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="order by dede58.com"/>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" tyle="text/css" />
<link href="css/Orders.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.reveal.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/jquery.sumoselect.min.js" type="text/javascript"></script>
<script src="js/common_js.js" type="text/javascript"></script>
<script src="js/footer.js" type="text/javascript"></script>
<!-- <script src="js/jquery.jumpto.js" type="text/javascript"></script> -->
<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-router.js"></script>
<script src="assets/js/axios.min.js"></script>
<title>确认订单</title>
</head>
 <script type="text/javascript">
        $(document).ready(function () {
            window.asd = $('.SlectBox').SumoSelect({ csvDispCount: 3 });
            window.test = $('.testsel').SumoSelect({okCancelInMulti:true });
        });
    </script>
<body>
<div id="Orders" class="Inside_pages  clearfix">
  <div class="Orders_style clearfix">
     <div class="address clearfix">
       <div class="title">收货人信息</div>
          <div class="adderss_list clearfix">
            <div class="title_name">选择收货地址 <a href="user_address.html">+添加地址</a></div>
             <div class="list" id="select">
            <ul class="confirm active" v-for="add in useradds">
            <!-- <div class="default">默认地址</div> -->
            <div class="adderss_operating">
             <div class="Operate"><a href="#" class="delete_btn"></a> <a href="#" class="modify_btn"></a></div>
            </div>
            <div class="user_address">
            <li>{{add.consignee}}</li>
            <li>{{add.address}}</li>
            <li class="Postcode">{{add.postalcode}}</li>      
            <li>{{add.phone}}</li>
            </div>
            </ul>
            
            </div>
           </div>
        <!--收货地址样式-->
     <!-- <div class="Shipping_address">
       <ul class="detailed">
        <li><label>收货人姓名</label><span>张晓</span></li>
        <li><label>电子邮件</label><span>4567454@qq.com</span></li>
        <li><label>详细地址</label><span>四川成都武侯区簇景西路20号3栋1单元302号</span></li>
        <li><label>邮政编码</label><span></span></li>
        <li><label>移动电话</label><span></span></li> 
         <li><label>固定电话</label><span></span></li>        
       </ul>
     </div> -->
     </div> 
        
     	<form class="form" method="post">  
		<fieldset> 
     <!--快递选择-->
     <!-- <div class="express_delivery">
       <div class="title_name">选择快递方式</div>
    
        <ul class="dowebok">
	    <li><input type="radio" name="radio" data-labelauty="圆通快递">
          <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
           <p><a href="#">点击查看是否在配送范围内</a></p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="中通快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="申通快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="邮政EMS">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
        <li><input type="radio" name="radio" data-labelauty="城际快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：同城包邮</p>
   
          </div>
        </li>
        <li><input type="radio" name="radio" data-labelauty="韵达快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="国通快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="顺丰快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满88元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="邮政小包">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
        <li><input type="radio" name="radio" data-labelauty="天天快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
        </ul>       
      
     </div> -->
    
     <!--付款方式-->
     <div class="payment">
      <div class="title_name">支付方式</div>
       <ul>
        <!-- <li><input type="radio" name="radio" data-labelauty="余额支付"></li> -->
        <li><input type="radio" name="radio" data-labelauty="支付宝"></li>
        <li><input type="radio" name="radio" data-labelauty="微信支付"></li>
        <li><input type="radio" name="radio" data-labelauty="银联支付"></li>
         <li><input type="radio" name="radio" data-labelauty="货到付款"></li>
       </ul>
     </div>
      <!--发票样式-->
     <!-- <div class="invoice_style">
       <ul>
         <li class="invoice_left"><input name="" type="checkbox" value="" data-labelauty="是否开发票"/> </li>
         <li class="invoice_left"><select name="somename" class="SlectBox" onclick="console.log($(this).val())" onchange="console.log('change is firing')">
              <option disabled="disabled" selected="selected">发票类型</option>
              <option value="办公用品">办公用品</option>
              <option value="食品">食品</option>
              <option value="20元红包">20元红包</option>
              <option value="50元红包">50元红包</option>
              <option value="100元红包">100元红包</option>
              <option value="200元红包">200元红包</option>
            </select>
         </li>
         <li class="invoice_left">发票抬头
         <input name="" type="text" class="text_info" /></li>
         <li class="invoice_left">
         <select name="somename" class="SlectBox" onclick="console.log($(this).val())" onchange="console.log('change is firing')">
              <option disabled="disabled" selected="selected">发票内容</option>
              <option value="办公用品">办公用品</option>
              <option value="食品">食品</option>
              <option value="数码配件">数码配件</option>
              <option value="电脑">电脑</option>
              <option value="手机">手机</option>
              <option value="200元红包">200元红包</option>
            </select>
         
         </li>
        </ul>
     </div> -->
     <!--产品列表-->
     <div class="Product_List">
     <!-- <div class="envelopes">
     选择已有红包<select name="somename" class="SlectBox" onclick="console.log($(this).val())" onchange="console.log('change is firing')">
			        <option disabled="disabled" selected="selected">选择红包金额</option>
			        <option value="5元红包">5元红包</option>
			        <option value="10元红包">10元红包</option>
			        <option value="20元红包">20元红包</option>
			        <option value="50元红包">50元红包</option>
                    <option value="100元红包">100元红包</option>
                    <option value="200元红包">200元红包</option>
			    </select>
                或者输入红包序列号<input name="" type="text" class="text_number" /><input type="submit"  class="verification_btn" value="验证序列号"/>
     </div> -->
      <table>
       <thead><tr class="title"><td class="name">商品名称</td><td class="price">商品价格</td><td class="Preferential">优惠价</td><td class="Quantity">购买数量</td><td class="Money">金额</td></tr></thead>
       <tbody>
       <tr >
        <td class="Product_info">
         <a href="shop-details.html?product.id"><img src="images/product_img_17.png"  width="100px" height="100px"/></a>
         <a href="shop-details.html?product.id" class="product_name">{{product.productName}}</a>
         </td>
        <td><i>￥</i>{{product.singlePrice}}</td>
        <td><i>￥</i>{{product.singlePrice}}</td>
        <td>{{count}}</td>
        <td class="Moneys"><i>￥</i>{{product.singlePrice*count}}</td>
       </tr>
        <!-- <tr>
        <td class="Product_info">
         <a href="#"><img src="images/product_img_17.png"  width="100px" height="100px"/></a>
         <a href="#" class="product_name">麻阳冰糖橙子甜橙冰糖柑8斤新鲜水果甜过永兴冰糖橙赣南脐橙包邮</a>
         </td>
        <td><i>￥</i>123.00</td>
        <td><i>￥</i>112.00</td>
        <td>2</td>
        <td class="Moneys"><i>￥</i>224.00</td>
       </tr> -->
       </tbody>
      </table>
      <div class="Pay_info">
       <label>订单留言</label><input name="" type="text"  onkeyup="checkLength(this);" class="text_name " />  <span class="wordage">剩余字数：<span id="sy" style="color:Red;">50</span></span>  
      </div>
      <!--价格-->
      <div class="price_style">
      <div class="right_direction">
        <ul>
         <li><label>商品总价</label><i>￥</i><span>{{product.singlePrice*count}}</span></li>
         <li><label>优惠金额</label><i>￥</i><span>{{product.singlePrice-product.singlePrice}}</span></li>
         <li><label>配&nbsp;&nbsp;送&nbsp;&nbsp;费</label><i>￥</i><span>0</span></li>
         <li class="shiji_price"><label>实&nbsp;&nbsp;付&nbsp;&nbsp;款</label><i>￥</i><span>{{total}}</span></li>    
        </ul>   
        <div class="btn">
			<input name="submit" type="button" @click="gopay()" value="提交订单" class="submit_btn"/> 
			<input name="" type="button" @click="goback()" value="返回商品详情"  class="return_btn"/> 
		</div>
         <!-- <div class="integral right">待订单确认后，你将获得<span>345</span>积分</div> -->
      </div>
      </div>
     </div>  
     </fieldset>
        </form>
  </div>
</div>
<script type="text/javascript">
function checkLength(which) {
	var maxChars = 50; //
	if(which.value.length > maxChars){
		alert("您出入的字数超多限制!");
		// 超过限制的字数了就将 文本框中的内容按规定的字数 截取
		which.value = which.value.substring(0,maxChars);
		return false;
	}else{
		var curr = maxChars - which.value.length; //250 减去 当前输入的
		document.getElementById("sy").innerHTML = curr.toString();
		return true;
	}
}
</script>
<script>
	var v;
	$(function(){
		$(':input').labelauty();
	});
	
	//获取参数值
	var str=document.URL.split("?")[1];
	var obj={};
	var arr;
	if(str!=null)
	arr=str.split("&");
	var arr1;
	for(var i=0;i<arr.length;i++){
		arr1=arr[i].split("=");
		obj[arr1[0]]=arr1[1];
	}
	console.log(obj)
	
	var paramid=obj.id;
	var count=obj.count;
	console.log("paramid****"+paramid)
	console.log("count****"+count);
	
	//获取session中的user对象
	var user1=JSON.parse(sessionStorage.getItem('user'));
	
	
	new Vue({
		el:'#Orders',
		data:{
			modelId:'',
			count:'',
			user:{
				id:'',
				userName:''
			},
			product:{},
			b:false,
			total:'',
			useradds:[],
			address:{
				name:'',
				phone:'',
				code:'',
				useraddress:''
			},
			orders:{
				modelId:'',
				userId:'',
				quantity:'',
				price:''
			}
		},
		methods:{
			setTotal:function(){
				this.total=this.product.singlePrice*this.count-(this.product.singlePrice-this.product.singlePrice);
				console.log(this.product.singlePrice);
				console.log(this.total);
			},
			getUserAddress:function(id){
				$.get('http://localhost:8082/usersadd/getUseraddById',{uid:id},function(resp){
					console.log("地址返回："+resp.data)
					v.useradds=resp.data;
					console.log(v.useradds);
				})
			},
			getProductDetail:function(id){
				$.get('http://192.168.1.19:8080/products/getSendProductsDetail',{id:id},function(resp){
					v.product=resp.data;
					v.total=v.product.singlePrice*v.count-(v.product.singlePrice-v.product.singlePrice);
				})
			},
			getParam:function(){
				if(paramid!=null){
					this.modelId=paramid;
				}
				if(count!=null){
					this.count=count;
				}
			},
			
			gopay:function(){
				this.setTotal();
				this.orders.modelId=this.modelId;
				this.orders.userId=this.user.id;
				this.orders.quantity=this.count;
				this.orders.price=this.total;
				$.get('http://localhost:8085/maintain/insertMaintain',v.orders,function(resp){
					if(resp.data==1){
						console.log("成功");
						if(confirm("提交成功！")){
							window.location='pay.html'
						}
					}
				})
				
			},
			goback:function(){
				window.location='shop-details.html?id='+this.modelId;
			},
			getUser:function(){
				this.user=user1;
			}
		},
		mounted:function(){
			v=this;
			this.getUser();
			this.getParam();
			this.getUserAddress(this.user.id);
			this.getProductDetail(this.modelId);
			
		}
		
	})
	
</script>
</body>
</html>
